<template>
  <div v-if="gameOver" class="modal-overlay">
    <div class="modal" :class="{ 'modal-victory': gameWon }">
      <div class="modal-icon">
        {{ gameWon ? '🎉' : '😢' }}
      </div>
      <h2 class="modal-title">
        {{ gameWon ? '恭喜通关！' : '游戏结束' }}
      </h2>
      <div class="modal-content">
        <div class="result-info">
          <div class="final-score">
            最终得分: <span class="score-value">{{ score }}</span>
          </div>
          <div class="target-info">
            目标分数: {{ targetScore }}
          </div>
          <div class="performance">
            {{ gameWon ? '🌟 出色完成！' : getFailureReason() }}
          </div>
        </div>
        <div class="stats">
          <div class="stat-item">
            <span class="stat-label">用时:</span>
            <span class="stat-value">{{ formatTime(60 - timeLeft) }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">使用步数:</span>
            <span class="stat-value">{{ 30 - moves }}</span>
          </div>
        </div>
      </div>
      <button @click="handleRestart" class="restart-btn">
        {{ gameWon ? '再来一局' : '重新开始' }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameOverModal',
  props: {
    gameOver: {
      type: Boolean,
      required: true
    },
    gameWon: {
      type: Boolean,
      default: false
    },
    score: {
      type: Number,
      required: true
    },
    targetScore: {
      type: Number,
      required: true
    },
    moves: {
      type: Number,
      required: true
    },
    timeLeft: {
      type: Number,
      required: true
    }
  },
  emits: ['restart'],
  methods: {
    handleRestart() {
      this.$emit('restart')
    },
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins}:${secs.toString().padStart(2, '0')}`
    },
    getFailureReason() {
      if (this.timeLeft <= 0) {
        return '⏰ 时间不够了'
      } else if (this.moves <= 0) {
        return '🎯 步数用完了'
      } else {
        return '💪 再接再厉'
      }
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  animation: slideIn 0.3s ease;
  border: 3px solid #e74c3c;
}

.modal-victory {
  border-color: #27ae60;
  background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
}

.modal-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: bounce 0.6s ease;
}

.modal-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #e74c3c;
}

.modal-victory .modal-title {
  color: #27ae60;
}

.modal-content {
  margin-bottom: 30px;
}

.result-info {
  margin-bottom: 20px;
}

.final-score {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
}

.score-value {
  color: #e74c3c;
  font-size: 24px;
}

.modal-victory .score-value {
  color: #27ae60;
}

.target-info {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 10px;
}

.performance {
  font-size: 18px;
  font-weight: bold;
  color: #f39c12;
  margin-bottom: 15px;
}

.modal-victory .performance {
  color: #27ae60;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

.restart-btn {
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.modal-victory .restart-btn {
  background: linear-gradient(45deg, #27ae60, #2ecc71);
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.restart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.modal-victory .restart-btn:hover {
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    transform: translateY(-30px);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
</style> 